<template>
  <div class="main">
    <div class="line"></div>
    <el-tabs
      v-model="activeName"
      @tab-click="handleClick"
      style="
        position: absolute;
        top: 160px;
        left: 400px;
        color: rgba(255, 255, 255, 1);
        width: 1100px;
        height: 700px;
      "
    >
      <el-tab-pane name="first" disabled>
        <span slot="label" style="font-size: 18px">工作台</span>
      </el-tab-pane>

      <el-tab-pane name="second">
        <span slot="label"
          ><i class="el-icon-date"></i> 全部项目<span class="outOrder"></span
        ></span>
        <container>
          <div class="row">
            <el-row>
              <el-col
                class="col-md-3"
                style="height: 160px; margin-right: 35px; margin-bottom: 30px"
                :span="8"
              >
                <el-card
                  :body-style="{
                    padding: '0px',
                    height: '150px',
                    background: 'rgba(40, 37, 37, 1)',
                    boxShadow: '0px 4px 9px 0px rgba(40, 37, 37, 0.7714)',
                  }"
                  shadow="always"
                >
                  <i
                    class="el-icon-plus"
                    @click="centerDialogVisible = true"
                    style="
                      font-size: 59px;
                      line-height: 150px;
                      margin-left: 95px;
                      color: rgb(153, 153, 153);
                    "
                  ></i>

                  <el-dialog
                    title="创建新项目"
                    :visible.sync="centerDialogVisible"
                    width="50%"
                    center
                  >
                    <div class="container">
                      <div class="row">
                        <div class="col-md-2 square">
                          <center>
                            <img
                              style="margin-top: 15px"
                              src="../assets/images/移动应用.png"
                            />
                          </center>
                          <center style="margin-top:14px;line-height:15px;">移动应用开发</center>
                        </div>
                        <div class="col-md-2 square">
                          <center>
                            <img
                              style="margin-top: 15px"
                              src="../assets/images/企业服务.png"
                            />
                          </center>
                          <center style="margin-top:14px;line-height:15px;">企业服务</center>
                        </div>
                        <div class="col-md-2 square">
                            <center>
                            <img
                              style="margin-top: 15px"
                              src="../assets/images/国际贸易.png"
                            />
                          </center>
                          <center style="margin-top:14px;line-height:15px;">国际贸易</center>
                        </div>
                        <div class="col-md-2 square">
                            <center>
                            <img
                              style="margin-top: 15px"
                              src="../assets/images/生产制造.png"
                            />
                          </center>
                          <center style="margin-top:14px;line-height:15px;">生产制造</center>
                        </div>
                        <div class="col-md-2 square">
                           <center>
                            <img
                              style="margin-top: 15px"
                              src="../assets/images/餐饮实体.png"
                            />
                          </center>
                          <center style="margin-top:14px;line-height:15px;">餐饮实体</center>
                        </div>
                      </div>
                      <div class="row">
                        <div class="col-md-2 square">
                           <center>
                            <img
                              style="margin-top: 15px"
                              src="../assets/images/农林牧渔.png"
                            />
                          </center>
                          <center style="margin-top:14px;line-height:15px;">农林牧渔</center>
                        </div>
                        <div class="col-md-2 square">
                           <center>
                            <img
                              style="margin-top: 15px"
                              src="../assets/images/零售行业.png"
                            />
                          </center>
                          <center style="margin-top:14px;line-height:15px;">零售行业</center>
                        </div>
                        <div class="col-md-2 square">
                           <center>
                            <img
                              style="margin-top: 15px"
                              src="../assets/images/医疗服务.png"
                            />
                          </center>
                          <center style="margin-top:14px;line-height:15px;">医疗服务</center>
                        </div>
                        <div class="col-md-2 square">
                           <center>
                            <img
                              style="margin-top: 15px"
                              src="../assets/images/教育行业.png"
                            />
                          </center>
                          <center style="margin-top:14px;line-height:15px;">教育行业</center>
                        </div>
                        <div class="col-md-2 square">
                           <center>
                            <img
                              style="margin-top: 15px"
                              src="../assets/images/艺术设计.png"
                            />
                          </center>
                          <center style="margin-top:14px;line-height:15px;">艺术设计</center>
                        </div>
                      </div>
                      <div class="row">
                        <div class="col-md-2 square">
                           <center>
                            <img
                              style="margin-top: 15px"
                              src="../assets/images/金融服务.png"
                            />
                          </center>
                          <center style="margin-top:14px;line-height:15px;">金融服务</center>
                        </div>
                        <div class="col-md-2 square">
                           <center>
                            <img
                              style="margin-top: 15px"
                              src="../assets/images/智能硬件.png"
                            />
                          </center>
                          <center style="margin-top:14px;line-height:15px;">智能硬件</center>
                        </div>
                        <div class="col-md-2 square">
                             <center>
                            <img
                              style="margin-top: 15px"
                              src="../assets/images/科技研发.png"
                            />
                          </center>
                          <center style="margin-top:14px;line-height:15px;">科技研发</center>
                        </div>
                        <div class="col-md-2 square">
                             <center>
                            <img
                              style="margin-top: 15px"
                              src="../assets/images/娱乐服务.png"
                            />
                          </center>
                          <center style="margin-top:14px;line-height:15px;">娱乐服务</center>
                        </div>
                        <div class="col-md-2 square" style="background:rgb(255,235,59);">
                          <center>
                            <img
                              width="50"
                              style="margin-top: 15px;"
                              src="../assets/images/拼图.png"
                            />
                          </center>
                          <center style="margin-top:14px;line-height:15px;color:rgb(56,56,56);">标准</center>
                        </div>
                      </div>
                    </div>
                    <span slot="footer" class="dialog-footer">
                      <el-button
                        type="primary"
                        style="
                          background: rgb(255, 235, 59);
                          border: 1px solid rgb(255, 235, 59);
                          color: black;
                          width:250px;
                        "
                        @click="centerDialogVisible = false"
                        >创建项目</el-button
                      >
                    </span>
                  </el-dialog>
                </el-card>
              </el-col>

              <el-col
                class="col-md-3"
                style="height: 160px"
                :span="8"
                v-for="(o, index) in 2"
                :key="o"
                :offset="index > 0 ? 1 : 0"
              >
                <el-card :body-style="{ padding: '0px', height: '150px' }">
                  <center style="color:black;font-size:18px;position:relative;top:70px;">AR云商</center>
                </el-card>
              </el-col>
            </el-row>
          </div>

          <div class="row">
            <el-row>
              <el-col
                class="col-md-3"
                style="height: 160px; margin-right: 35px; margin-bottom: 25px"
                :span="8"
              >
                <el-card :body-style="{ padding: '0px', height: '150px' }">
                     <center style="color:black;font-size:18px;position:relative;top:70px;">***智能软件</center>
                </el-card>
              </el-col>
            </el-row>
          </div>
           
        </container>
      </el-tab-pane>
      <el-tab-pane name="third">
        <span slot="label"
          ><i class="el-icon-date"></i> 主持项目<span class="outOrder"></span
        ></span>
        主持项目
      </el-tab-pane>
      <el-tab-pane name="forth">
        <span slot="label"><i class="el-icon-date"></i> 参与项目</span>
        参与项目
      </el-tab-pane>
    </el-tabs>
    <div style="width:131px;height:50px;position:relative;top:-300px;left:2px;float:right;z-index:99999;background:rgb(44,44,49);"></div>
  </div>
</template>

<script>
export default {
  name: "Main",
  data() {
    return {
      activeName: "second",
      centerDialogVisible: false,
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(156);
    },
    plus() {
      alert(13);
    },
  },
};
</script>

<style scoped>
@import "../assets/icon/iconfont.css";
span {
  color: white;
}
.outOrder:before {
  content: "|";
  position: relative;
  left: 18px;
}
.model {
  color: rgb(38, 43, 52);
  border: 1px solid red;
  width: 457px;
  height: 470px;
  margin-left: -25px;
  margin-top: -105px;
  float: left;
  background: rgb(38, 43, 52);
}
.square {
  width: 100px;
  height: 100px;
  border: 1px solid rgb(166, 166, 166);
  border-radius: 10px;
  margin-left: 30px;
  margin-top: 30px;
}
center{
  color:white;
  font-size:12px;
  margin-top:-4px;
}
img{
  width: 40px;
  height: 40px;
}
</style>
<style>
.el-dialog__header {
  background-color: rgb(48, 54, 65);
  height: 35px;
}
.el-dialog__title {
  font-size: 16px;
  color: white;
  position: relative;
  top: -16px;
}
.el-dialog__body {
  background-color: rgb(38, 43, 52);
}
.el-dialog__footer {
  background-color: rgb(38, 43, 52);
}
</style>